<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import type { FormInstance } from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";
import type { UploadProps, UploadUserFile } from "element-plus";
import { UploadFilled } from "@element-plus/icons-vue";
import { addVideo } from "@/api/video/upload";
import { getCategory } from "@/api/video/category";
//获得表单返回的元素
const formRef = ref<FormInstance>();
//转圈圈
const loading = ref<boolean>(false);
//双向绑定的对象
const numberValidateForm = ref(
  reactive({
    videoUrl: "",
    coverUrl: "",
    title: "",
    type: "1",
    auth: "0",
    mcId: "",
    scId: "",
    tags: "asdad",
    descr: "",
  })
);
const emptyForm = () => {
  numberValidateForm.value.videoUrl = "";
  numberValidateForm.value.coverUrl = "";
  numberValidateForm.value.title = "";
  numberValidateForm.value.type = "1";
  numberValidateForm.value.auth = "0";
  numberValidateForm.value.mcId = "";
  numberValidateForm.value.scId = "";
  numberValidateForm.value.tags = "asdad";
  numberValidateForm.value.descr = "";
};

const handleCreateOrUpdate = () => {
  loading.value = true;
  addVideo(numberValidateForm.value)
    .then((res) => {
      if (res.data == "success") {
        ElMessage({
          message: "操作成功",
          type: "success",
        });
      } else {
        ElMessage({
          message: "操作失败",
          type: "warning",
        });
      }
    })

    .finally(() => {
      loading.value = false;
      emptyForm;
    });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const fileList = ref<UploadUserFile[]>([]);

//文件地址
const uploadVideoRef = ref();
const headlerUploadSuccess = (response) => {
  if (response.data == null) {
    ElMessage({
      message: "上传失败",
      type: "warning",
    });
    return;
  }
  //上传成功后显示图像
  numberValidateForm.value.videoUrl = response.data;
  uploadVideoRef.value.clearFiles();
  ElMessage({
    message: "上传成功",
    type: "success",
  });
};

//封面地址
const uploadCoverRef = ref();
const headlerUploadCoverSuccess = (response) => {
  if (response.data == null) {
    ElMessage({
      message: "上传失败",
      type: "warning",
    });
    return;
  }
  //上传成功后显示图像
  numberValidateForm.value.coverUrl = response.data;
  uploadCoverRef.value.clearFiles();
  ElMessage({
    message: "上传成功",
    type: "success",
  });
};

const options = ref();
//选中的分区
const selectedValue = ref();
//选择后赋值
const handleChange = () => {
  numberValidateForm.value.mcId = selectedValue.value[0];
  numberValidateForm.value.scId = selectedValue.value[1];
};
// 转换函数
function transformDataToCascaderOptions(data) {
  return data.map((category) => ({
    value: category.mcId,
    label: category.mcName,
    children: category.scList.map((subCategory) => ({
      value: subCategory.scId,
      label: subCategory.scName,
      tag: subCategory.rcmTag.join(", "),
    })),
  }));
}

const getCategoryList = async () => {
  const res = await getCategory();
  options.value = transformDataToCascaderOptions(res);
};
//页面初始化调用getCategoryList
onMounted(() => {
  getCategoryList();
});
</script>
<template>
  <div class="app-container">
    <div class="parent">
      <div class="common-layout child">
        <el-container>
          <el-header>
            <h2>投稿</h2>
          </el-header>
          <el-divider />
          <el-main>
            <el-form
              ref="formRef"
              style="max-width: 600px"
              :model="numberValidateForm"
              label-width="auto"
              class="demo-ruleForm"
            >
              <el-form-item>
                <el-upload
                  ref="uploadVideoRef"
                  class="upload-demo video-input-wrapper"
                  drag
                  action="/dev-api/api/upload/upload"
                  :on-success="headlerUploadSuccess"
                  multiple
                >
                  <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                  <div class="el-upload__text">
                    Drop file here or
                    <em>click to upload</em>
                  </div>
                  <template #tip>
                    <div class="el-upload__tip">
                      MP4 files with a size less than 300MB.
                    </div>
                  </template>
                </el-upload>
              </el-form-item>
              <h2>基本信息</h2>
              <el-form-item prop="coverUrl" label="视频封面">
                <el-upload
                  ref="uploadCoverRef"
                  class="upload-demo"
                  action="/dev-api/api/upload/cover"
                  name="file"
                  :show-file-list="false"
                  :on-success="headlerUploadCoverSuccess"
                >
                  <el-avatar :src="`${numberValidateForm.coverUrl}`" />
                  <el-button
                    type="primary"
                    style="margin-left: 20px"
                    color="DCDFE6FF"
                  >
                    请选择封面
                  </el-button>
                </el-upload>
              </el-form-item>
              <el-form-item prop="title" label="视频标题">
                <el-input
                  v-model="numberValidateForm.title"
                  placeholder="请输入标题"
                />
              </el-form-item>
              <el-form-item prop="type" label="视频类型" class="label">
                <el-radio-group v-model="numberValidateForm.type">
                  <el-radio value="1" size="large">自制</el-radio>
                  <el-radio value="2" size="large">转载</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item prop="type" label="作者声明">
                <el-radio-group v-model="numberValidateForm.auth">
                  <el-radio value="0" size="large">不声明</el-radio>
                  <el-radio value="1" size="large">未经允许禁止转载</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item prop="category" label="视频分区">
                <el-cascader
                  :options="options"
                  :show-all-levels="true"
                  v-model="selectedValue"
                  @change="handleChange"
                >
                  <template #default="{ node, data }">
                    <span>{{ data.label }}</span>
                    <span v-if="node.isLeaf && data.tag">({{ data.tag }})</span>
                    <span v-if="!node.isLeaf">
                      ({{ data.children.length }})
                    </span>
                  </template>
                </el-cascader>
              </el-form-item>
              <el-form-item prop="dsc" label="视频描述" label-width="auto">
                <el-input
                  v-model="numberValidateForm.descr"
                  placeholder="请输入标题"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleCreateOrUpdate">
                  Submit
                </el-button>
                <el-button @click="resetForm(formRef)">Reset</el-button>
              </el-form-item>
            </el-form>
          </el-main>
        </el-container>
      </div>
    </div>
  </div>
</template>
<style scoped>
/* 使用scoped属性来确保样式只应用于当前组件 */
.app-container {
  background-color: white; /* 设置背景色为白色 */
  height: 100vh; /* 如果需要，设置高度为视窗的100%，这样背景色会覆盖整个视窗 */
  /* 其他样式... */
}
.parent {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  /*height: 100vh; !* 假设父元素高度为视窗高度 *!*/
}
.child {
  /* 子元素样式 */
  width: 900px;
}
.video-input-wrapper {
  flex: 1;
  cursor: pointer;
  padding-bottom: 20px;
  display: inline-block;
}
.color-head {
  background-color: #ff9ae9;
}
</style>
